<template>
    <a-dropdown>
        <HeaderButton :theme="props.theme" class="current-station"> 当前电站：{{ text }} <caret-down-outlined class="down-arrow" /> </HeaderButton>
        <template #overlay>
            <a-menu @click="onDropdownClick">
                <a-menu-item v-for="item in state.list" :key="item.id">
                    {{ item.name }}
                </a-menu-item>
            </a-menu>
        </template>
    </a-dropdown>
</template>
<script setup>
import { reactive, computed } from 'vue'
import { storeToRefs } from 'pinia'
import { CaretDownOutlined } from '@ant-design/icons-vue'
import { useBusinessStore } from '@iframe/tools/store'
import { myStation } from '/@/api/Iframe/Home/index.js'
import { SUCCESS_CODE } from '@iframe/tools/axios/axios'
import HeaderButton from '/@/components/HeaderButton/index.vue'

const businessStore = useBusinessStore()
const { getBusinessId } = storeToRefs(businessStore)
const props = defineProps({
    theme: {
        type: String
    }
})

const state = reactive({
    list: []
})

const text = computed(() => {
    return state.list.find(item => item.id === getBusinessId.value)?.name
})

const onDropdownClick = ({ key }) => {
    businessStore.setBusinessId(key)
}

const queryMyStation = () => {
    myStation().then(result => {
        if (result.code === SUCCESS_CODE) {
            state.list = result.data || []
            if (result.data && result.data.length > 0) {
                businessStore.setDefaultBusinessId(result.data[0].id)
            }
        }
    })
}
queryMyStation()
</script>
<style lang="less" scoped>
.current-station {
    .down-arrow {
        margin-left: 3px;
    }
}
</style>
